<!-- 分销商信息  -->
<template>
  <div>213</div>
  <su-popup :show="show" type="center" round="10" class="ss-checkout-counter-wrap" @close="onClose">
    <view class="notice-box">
      <view class="img-wrap">
        <image
          class="notice-img"
          :src="sheep.$url.static('/static/img/shop/commission/forbidden.png')"
          mode="aspectFill"
        />
      </view>
      <view class="notice-title"> 推荐码 </view>
      <view class="notice-detail">
        <uni-easyinput
          maxlength="20"
          placeholder="请输入推荐码"
          v-model="state.spread"
          :inputBorder="false"
          :clearable="false"
        />
      </view>
      <button
        class="ss-reset-button notice-btn ui-Shadow-Main ui-BG-Main-Gradient"
        @tap="onConfirm"
      >
        知道了
      </button>
      <button class="ss-reset-button back-btn" @tap="sheep.$router.back()"> 返回 </button>
    </view>
  </su-popup>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onShow } from '@dcloudio/uni-app';
  // import BrokerageApi from '@/sheep/api/trade/brokerage';

  const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
  });

  const emits = defineEmits('close');

  const state = reactive({
    spread: undefined,
  });

  // 提交订单
  async function onConfirm() {
    if (!state.spread) {
      sheep.$helper.toast('请填写推荐码');
      return;
    }
    if (state.spread) {
      const res = await sheep.$platform.useProvider('wechat').bindBrokerUser(state.spread);
      if (res.msg === '已经绑定了推广人') {
      } else if (res.code !== 0) return;
      visible.value = false;
    }
  }
  const onClose = () => {
    emits('close');
  };
</script>

<style lang="scss" scoped>
  // 用户资料卡片
  .user-card {
    width: 690rpx;
    height: 192rpx;
    margin: -88rpx 20rpx 0 20rpx;
    padding-top: 88rpx;
    background-size: 100% 100%;

    .head-img-box {
      margin-right: 20rpx;
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      position: relative;
      background: #fce0ad;

      .head-img {
        width: 92rpx;
        height: 92rpx;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .card-top {
      box-sizing: border-box;
      padding-bottom: 34rpx;

      .user-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #692e04;
        line-height: 30rpx;
        margin-bottom: 20rpx;
      }

      .log-btn {
        width: 84rpx;
        height: 42rpx;
        border: 2rpx solid rgba(#ffffff, 0.33);
        border-radius: 21rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: #ffffff;
        margin-bottom: 20rpx;
      }

      .look-btn {
        color: #fff;
        width: 40rpx;
        height: 40rpx;
      }
    }

    .user-info-box {
      .tag-box {
        background: #ff6000;
        border-radius: 18rpx;
        line-height: 36rpx;

        .tag-img {
          width: 36rpx;
          height: 36rpx;
          border-radius: 50%;
          margin-left: -2rpx;
        }

        .tag-title {
          font-size: 24rpx;
          padding: 0 10rpx;
          font-weight: 500;
          line-height: 36rpx;
          color: #fff;
        }
      }
    }
  }
</style>